<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>T-phone</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      body {
        min-height: 100vh;
        font-family: Helvetica Neue, PingFang SC, Hiragino Sans GB, Heiti SC,
          Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        background: #ededed;
        color: #666;
        font-size: 14px;
      }
      header {
        background-image: linear-gradient(90deg, #222325, #3b3c3f, #222325);
        height: 45px;
        display: flex;
        flex-direction: row;
        color: hsla(0, 0%, 100%, 0.7);
        font-size: 12px;
        align-items: center;
        /* justify-content: center; */
      }
      header .icon-logo {
        height: 18px;
        width: 18px;
        margin: 1vw;
      }
      header .nav {
        display: flex;
        flex: 1;
        justify-content: center;
      }
      header .nav > li {
        margin: 0 10px;
      }
      header .user {
        display: flex;
      }
      header .user > div {
        width: 18px;
        height: 18px;
        background-color: #ccc;
        border-radius: 3px;
        margin: 0 5px;
      }
      nav {
        height: 74px;
        padding: 0 46px;
        background-color: #fff;
        box-shadow: 0 4px 10px 0 rgb(0 0 0 / 5%);
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
      }
      nav > span {
        margin-right: 10px;
      }
      nav > span:hover {
        color: #395699;
        /* transition: all .3s ease-out; */
        cursor: pointer;
      }
      .input-wrapper {
        display: flex;
        flex: 1;
        justify-content: flex-end;
      }
      .input-wrapper > .input-group {
        position: relative;
        height: 24px;
        /* width: 20em; */
        outline: 1px solid #ccc;
        border: none;
        border-radius: 100px;
        /* text-indent: 2em; */

        padding-right: 2em;
        display: flex;
        align-items: center;
      }
      .input-wrapper > .input-group > img {
        width: 1em;
        height: 1em;
        padding: 0 5px;
      }
      .input-group > input {
        height: 100%;
        width: 15em;
        font-size: 16px;
        border: none;
        outline: none;
      }
      main {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 100px;
      }
      .banner {
        border-radius: 5px;
        overflow: hidden;
        display: flex;
      }
      .banner > img {
        width: 100%;
        /* height: 552px; */
        /* aspect-ratio: 1218/553; */
      }
      .banner > li {
        display: inline-block;
        height: 198px;
      }
      .banner > li > img {
        width: 100%;
      }
      .panel {
        margin: 25px 0;
      }
      footer {
        min-height: 30vw;
        background-color: #fff;
        background: #fafafa;
        border-top: 1px solid #e6e6e6;
      }
    </style>
  </head>
  <body>
    <header>
      <div>
        <img
          class="icon-logo"
          src=""
          alt=""
        />
      </div>
      <ul class="nav">
        <li>在线商城</li>
        <li>坚果 R2</li>
        <li>Smartisan TNT go</li>
        <li>Smartisan TNT go</li>
        <li>Smartisan TNT go</li>
        <li>Smartisan TNT go</li>
        <li>Smartisan TNT go</li>
      </ul>
      <div class="user">
        <div></div>
        <div></div>
      </div>
    </header>
    <nav>
      <span>首页</span>
      <span>坚果手机</span>
      <span>TNT</span>
      <span>官方自营</span>
      <span>服务</span>
      <div class="input-wrapper">
        <div class="input-group">
          <img
            src=""
            alt=""
          />
          <input type="text" />
        </div>
      </div>
    </nav>
    <main>
      <section class="banner panel">
        <img
          src="https://resource.smartisan.com/resource/fa808c10081b9fd3040bb7bfd12b891c.jpg?x-oss-process=image/resize,w_1220/format,webp/quality,Q_95"
          alt=""
        />
      </section>
      <ul class="banner">
        <li>
          <img
            src="https://resource.smartisan.com/resource/fbefae00ef98859f342e9f56889899a0.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://resource.smartisan.com/resource/9c5f99f7dec76684ccb839a0d7ab8640.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://resource.smartisan.com/resource/fbefae00ef98859f342e9f56889899a0.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://resource.smartisan.com/resource/9c5f99f7dec76684ccb839a0d7ab8640.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
      </ul>
      <section class="production">
        <div class="title">热门商品</div>
        <section class="banner panel">
        <img
          src="https://resource.smartisan.com/resource/fa808c10081b9fd3040bb7bfd12b891c.jpg?x-oss-process=image/resize,w_1220/format,webp/quality,Q_95"
          alt=""
        />
      </section>
      <ul class="banner">
        <li>
          <img
            src="https://resource.smartisan.com/resource/fbefae00ef98859f342e9f56889899a0.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://resource.smartisan.com/resource/9c5f99f7dec76684ccb839a0d7ab8640.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://resource.smartisan.com/resource/fbefae00ef98859f342e9f56889899a0.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://resource.smartisan.com/resource/9c5f99f7dec76684ccb839a0d7ab8640.jpg?x-oss-process=image/resize,w_600/format,webp"
            alt=""
          />
        </li>
      </ul>
      </section>
    </main>
    <footer>Copyright © 2020 smartisan.com 版权所有</footer>
  </body>
</html>
